<template>
  <!-- <Dialog v-model="dialogVisible" :title="dialogTitle"> -->
    <Form ref="formRef" v-loading="formLoading" :rules="rules" :schema="allSchemas.formSchema" >
      <template #isTest="form">
        <el-checkbox v-model="form['isTest']" @change="clickRadio" >是否监控日志</el-checkbox>
      </template>
    <template #functionName="form">
        <MyCheckBox v-model="form['functionName']" :option="monitorTypeOpt">功能类型</MyCheckBox>
    </template>
    </Form>
    <div style="text-align: center;">
      <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="setClose">取 消</el-button>
    </div>
  <!-- </Dialog> -->
</template>
<script lang="ts" setup>
import * as weComNewsApi from '@/api/news/weComNews'
import { allSchemas, rules, monitorTypeOpt } from './groupRobots.data'

defineOptions({ name: 'GroupRobotsForm' })

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const formRef = ref() // 表单 Ref

/** 打开弹窗 */
const open = async (type: string, id?: number|string) => {
  dialogVisible.value = true
  dialogTitle.value = t('action.' + type)
  formType.value = type
  formRef.value.setValues({id:'',functionName:[]})
  clickRadio(false)
  // 修改时，设置数据
  if (id) {
    formLoading.value = true;
    (await formRef.value.getElFormRef()).resetFields()
    formRef.value.setValues({id:''})
    
    try {
      const data = await weComNewsApi.getByIdRobot({id:id})
      data.isTest= data.isTest==0?true:false;
      data.functionName =data.functionName?data.functionName.split(','):[]
      formRef.value.setValues(data)
      clickRadio(data.isTest)
    } finally {
      formLoading.value = false
    }
  }else{
    (await formRef.value.getElFormRef()).resetFields()
    formRef.value.setValues({id:'',functionName:[]})
  }
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

/** 提交表单 */
/**
 * 
 * isTest  是否是测试群(0是  1否 )
 * type   类型 (0企业微信  1钉钉)
 * isUse  是否启用(0是  1否)
 */
const emit = defineEmits(['success','setClose']) // 定义 success 事件，用于操作成功后的回调
const setClose=()=>{
  dialogVisible.value = false
  emit('setClose')
}
const submitForm = async () => {
  // 校验表单
  if (!formRef) return
  const valid = await formRef.value.getElFormRef().validate()
  if (!valid) return
  // 提交请求
  formLoading.value = true
  try {
    const data = formRef.value.formModel;
    data.type=0;
    data.isTest= data.isTest==true?0:1;
    data.functionName=!data.functionName.length?null:data.functionName.join(",");
    if (formType.value === 'create') {
      await weComNewsApi.saveRobot(data)
      message.success(t('common.createSuccess'))
    } else {
      await weComNewsApi.updateRobot(data)
      message.success(t('common.updateSuccess'))
    }
    dialogVisible.value = false
    // 发送操作成功的事件
    emit('success')
    setClose()
  } finally {
    formLoading.value = false
  }
}
//动态添加功能类型
const clickRadio= async (val)=>{
const del= val;
 if(del){
  formRef.value.addSchema(
    {
    label: '功能类型',
    field: 'functionName',
    component: 'Checkbox',
      value:[],
      componentProps: {
          options: monitorTypeOpt
      }
  },
      3
  )
}else{
  formRef.value.delSchema('functionName');
}
  
}
</script>
